<template>
	<u-popup
		v-model="farmShopShow"
		mode="bottom"
		:mask-close-able="false"
		class="chicken-edit">
		<view class="box">
			<!-- tab -->
			<view class="dress-tab">
				<image
					src="/static/images/chicken/dress_tab.png"
					mode="widthFix"></image>
				<view class="tab-box">
					<view
						v-for="(val, index) in tabsList"
						:class="{
							choose: index == currentIndex,
						}"
						:style="index == currentIndex ? style : {}"
						:key="index"
						@click="tabClick(index)"
						class="tab-item">
						{{ val.name }}
					</view>
				</view>
			</view>
			<view class="center-box">
				<scroll-view
					scroll-y
					@scrolltolower="scrolltolower"
					class="center">
					<view class="shop-title">
						<view>可兑换商品</view>
						<view>
							<image
								src="/static/images/chicken/farm_shop_record.png"
								mode="widthFix"></image>
							<text>兑换记录</text>
						</view>
					</view>
					<view class="prop-box">
						<view
							v-for="(val, index) in shopList"
							:key="index"
							class="item">
							<view class="item-img">
								<image
									:src="val.img"
									mode="widthFix"></image>
							</view>
							<view class="item-bottom">
								<view class="hidden-2">{{ val.name }}</view>
								<view class="item-info">
									<view>剩余{{ val.num }}</view>
									<view>
										<image
											src="/static/images/chicken/dress_egg.png"
											mode="widthFix"></image>
										<text>{{ val.price }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<image
				class="bg"
				src="/static/images/chicken/farm_shop_bg.png"
				mode="widthFix"></image>
			<image
				class="close"
				@click="changeShow"
				src="/static/images/chicken/farm_shop_close.png"
				mode="widthFix"></image>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'myMessage',
		props: {
			farmShopShow: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				currentIndex: 0,
				style: {},
				shopList: [
					{
						img: '/static/images/chicken/dress_c_y.png',
						name: '商品名称',
						price: '900',
						num: '100',
					},
					{
						img: '/static/images/chicken/dress_c_y.png',
						name: '商品名称商品名称',
						price: '900',
						num: '100',
					},
					{
						img: '/static/images/chicken/dress_c_y.png',
						name: '商品名称',
						price: '900',
						num: '100',
					},
				],
				tabsList: [
					{ name: '实物商品' },
					{ name: '虚拟商品' },
				],
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				let arr = [
					"url('/static/images/chicken/farm_shop_tab_c_l.png')",
					"url('/static/images/chicken/farm_shop_tab_c_r.png')",
				];
				this.style.backgroundImage = arr[this.currentIndex];
			},
			tabClick(index) {
				this.currentIndex = index;
				this.init();
			},
			changeShow() {
				this.$emit('changeShow', 'farmShopShow');
			},
			scrolltolower() {
				console.log(1111111111);
			},
			useProp(val) {
				uni.showToast({
					title: '使用道具成功',
					icon: 'none',
				});
				this.changeShow();
				this.$emit('useSuccess', val);
			},
			jump() {
				this.changeShow();
				this.$emit('jump', 'prop');
			},
		}
	}
</script>

<style lang="scss" scoped>
.chicken-edit {
	.box {
		position: relative;
		width: 100%;
		min-height: 1094rpx;
		background-color: transparent;
		.dress-tab {
			position: absolute;
			left: 27rpx;
			top: 157rpx;
			z-index: 1;
			width: calc(100% - 54rpx);
			image {
				width: 100%;
			}
			.tab-box {
				position: absolute;
				left: 0;
				top: 0;
				display: flex;
				align-items: center;
				width: 100%;
				.tab-item {
					width: 50%;
					line-height: 77rpx;
					background: no-repeat left center;
					background-size: 100% 100%;
					text-align: center;
					font-size: 32rpx;
					font-weight: 400;
					color: #7C2E20;
					overflow: hidden;
					&:not(:last-of-type) {
						border-right: 2rpx solid rgba(#e49b62, .2);
					}
					&.choose {
						color: #fff;
					}
				} 
			}
		}
		.center-box {
			position: absolute;
			left: 0;
			top: 260rpx;
			z-index: 1;
			width: calc(100% - 54rpx);
			height: calc(100% - 260rpx);
			background: url('/static/images/chicken/farm_shop_list_bg.png') no-repeat center top;
			background-size: 100%;
			margin-left: 27rpx;
			text-align: center;
			overflow-y: hidden;
		}
		.center {
			position: absolute;
			left: 0;
			top: 6rpx;
			width: 100%;
			height: calc(100% - 6rpx);
			.shop-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 36rpx 34rpx 24rpx;
				view:first-of-type {
					font-size: 32rpx;
					font-weight: bold;
					color: #803627;
				}
				view:last-of-type {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #803627;
					image {
						width: 40rpx;
						margin-right: 6rpx;
					}
				}
			}
			.prop-box {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding: 0 28rpx;
			}
			.item {
				position: relative;
				display: flex;
				flex-direction: column;
				width: 304rpx;
				margin-bottom: 20rpx;
				background-color: #ffeed9;
				border-radius: 20rpx;
				box-shadow: 0rpx 6rpx 0rpx 0rpx #d6af7a;
				overflow: hidden;
				.item-img {
					width: 100%;
					height: 304rpx;
					image {
						width: 100%;
					}
				}
				.item-bottom {
					width: 100%;
					padding: 18rpx 28rpx;
					text-align: left;
					> view:first-of-type {
						margin-bottom: 14rpx;
						line-height: 1.3;
						font-size: 28rpx;
						color: #803627;
					}
					.item-info {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 24rpx;
						color: rgba(#803627, .6);
						view:last-of-type {
							display: flex;
							justify-content: center;
							width: 138rpx;
							height: 48rpx;
							padding-top: 8rpx;
							background: url('/static/images/chicken/farm_shop_btn.png') no-repeat center center;
							background-size: 100% 100%;
							color: #fff;
							image {
								width: 32rpx;
								margin: -2rpx 4rpx 0 0;
							}
						}
					}
				}
			}
		}
		.bg {
			width: 100%;
			margin-bottom: -10rpx;
		}
		.close {
			position: absolute;
			right: 10rpx;
			top: 30rpx;
			width: 60rpx;
		}
	}
}
</style>